import type { FormInstance } from 'ant-design-vue'
import { updateApp } from '@/apis/app-manage'
import { Button, DatePicker, Drawer, Form, FormItem, Input, message, Select, Space } from 'ant-design-vue'
import dayjs from 'dayjs'
import { app_status_dict, app_type_dict } from '../dict'

export default defineComponent({
  emits: ['success'],
  setup(_, { expose, emit }) {
    const open = ref(false)
    const loading = ref(false)
    const formRef = useTemplateRef<FormInstance>('formRef')
    const formState = reactive<{
      appId: string
      appName?: string
      appStatus?: string
      appType?: string
      notifyType?: string
      deadline?: string | dayjs.Dayjs
    }>({
      appId: '',
      appName: '',
      appStatus: '',
      appType: '',
      notifyType: '',
      deadline: '',
    })
    const rules = {
      // appId: [{ required: true, message: '请选择所属租户' }],
      // appName: [{ required: true, message: '请输入应用名称' }],
    }
    async function onSubmit() {
      try {
        await formRef.value?.validate()
        loading.value = true
        const res = await updateApp(formState)
        if (res.status === 0) {
          message.success('编辑成功')
          open.value = false
          emit('success')
        }
        else {
          message.error(res.msg)
        }
      }
      finally {
        loading.value = false
      }
    }
    expose({
      open(row: any) {
        open.value = true
        formState.appId = row.appId
        formState.appName = row.appName
        formState.appStatus = row.appStatus
        formState.appType = row.appType
        formState.notifyType = row.notifyType
        formState.deadline = row.deadline ? dayjs(row.deadline) : ''
      },
    })
    return () => (
      <Drawer open={open.value} width="40%" title="编辑应用" onClose={() => (open.value = false)}>
        <Form ref="formRef" labelCol={{ span: 3 }} model={formState} rules={rules}>
          <FormItem label="应用名称" name="appName">
            <Input value={formState.appName} onUpdate:value={value => (formState.appName = value)} placeholder="请输入应用名称" />
          </FormItem>
          <FormItem label="应用状态" name="appStatus">
            <Select value={formState.appStatus} onUpdate:value={value => (formState.appStatus = value as string)} placeholder="请选择应用状态" options={app_status_dict} />
          </FormItem>
          <FormItem label="应用类型" name="appType">
            <Select value={formState.appType} onUpdate:value={value => (formState.appType = value as string)} placeholder="请选择应用类型" options={app_type_dict} />
          </FormItem>
          <FormItem label="通知类型" name="notifyType">
            <Select value={formState.notifyType} onUpdate:value={value => (formState.notifyType = value as string)} placeholder="请选择通知类型" />
          </FormItem>
          <FormItem label="应用有效期" name="deadline">
            <DatePicker
              class="w-full"
              value={formState.deadline}
              onUpdate:value={value => (formState.deadline = value)}
              placeholder="请选择应用有效期"
              disabledDate={(current: dayjs.Dayjs) => current && current < dayjs().endOf('day')}
              valueFormat="YYYY-MM-DD"
            />
          </FormItem>
          <FormItem wrapperCol={{ span: 18, offset: 4 }}>
            <Space class="w-full flex justify-end">
              <Button onClick={() => open.value = false}>
                取消
              </Button>
              <Button loading={loading.value} type="primary" onClick={onSubmit}>
                提交
              </Button>
            </Space>
          </FormItem>
        </Form>
      </Drawer>
    )
  },
})
